<template>
	<view class="comp-custom-swiper">
		<template v-if="showDot">
			<uni-swiper-dot class="swiper_dot" :info="pictures" :dotsStyles="{
				backgroundColor: '#ffffff',
				selectedBackgroundColor: '#ffffff',
				selectedBorder: 'none',
				border: 'none',
				bottom: 8,
			}" :current="swiperCurrent" mode="round">
				<swiper :style="{height: height}" :current="swiperCurrent" :autoplay="autoplay" :circular="true" :interval="interval"
					@change="onSwiperChange">
					<swiper-item v-for="item in pictures" :key="item.id">
						<image :style="{
							width: '100%',
							height: height,
							borderRadius: radius,
						}" :src="resolveSrc(item.src)" @click="onClick(item)"></image>
					
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</template>
		<template v-else>
			<swiper :style="{height: height}" :current="swiperCurrent" :autoplay="autoplay" :circular="true" :interval="interval"
				@change="onSwiperChange" >
				<swiper-item v-for="item in pictures" :key="item.id">
					<image :style="{
						width: '100%',
						height: height,
						borderRadius: radius,
					}" :src="resolveSrc(item.src)" @click="onClick(item)"></image>
				</swiper-item>
			</swiper>
		</template>
		
	</view>
</template>

<script setup>
	import {
		ref,
	} from "vue";
	import { imagePrefix } from "@/common/js/data.js";
	const emit = defineEmits(['clickItem'])
	const props = defineProps({
		showDot: {
			type: Boolean,
			default: true,
		}, 
		autoplay: {
			type: Boolean,
			default: true,
		},
		interval: {
			type: Number,
			default: 3000,
		},
		pictures: {
			type: Array,
			default: () => [],
		},
		height: {
			type: String,
			default: '386rpx',
		},
		radius: {
			type: String,
		}
		
	});

	const resolveSrc = (path) => {
		return imagePrefix + path;
	}

	const swiperCurrent = ref(0);

	const onSwiperChange = (e) => {
		swiperCurrent.value = e.target.current;
	}
	const onClick = (item) => {
		emit('clickItem', item);
	}
</script>

<style lang="less" scoped>
	.comp-custom-swiper {
		box-sizing: border-box;
		background-color: #F5F5F5;
		.swiper,
		.swiper image {
			width: 100%;
			height: 100%;
		}
	}
</style>